<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汉堡菜单</title>
    <style>
        .k{
            margin: 100px;
            width: 40px;
            height: 8px;
            border-radius: 4px;
            background-color: #000;
            /* transition: all 1s; */
        }
        /* 伪对象选择符，可以在网页上生成内容，默认是行内元素 */
        /* 画上面一条 */
        .k::before{
            content: "";
            display: block;
            width: 40px;
            height: 8px;
            border-radius: 4px;
            background-color: #000;
            position: relative;
            top: -10px;
            transform-origin: 0px 0px;
        }
        .k:hover::before{
            transform: rotate(30deg);
        }
        /* 画下面一条 */
        .k::after{
            content: "";
            display: block;
            width: 40px;
            height: 8px;
            border-radius: 4px;
            background-color: #000;
            position: relative;
            top: 2px;
            transform-origin: 50% 10px;
        }
        .k:hover::after{
            transform: rotate(-30deg);
        }
        .k:hover{
            cursor: pointer;
            background-color:transparent;
        }
    </style>
</head>
<body>
    <!-- 
        一种玩法，用阴影绘制。
        第二种，用::before ::after绘制。

        行内元素（文本流）没有高。

        https://segmentfault.com/a/1190000023119205
     -->
    <div class="k"></div>
</body>
</html>